<template>
  <el-dialog :model-value="props.visible" title="考试记录" width="1000px" center align-center destroy-on-close @close="onClose">
    <div class="main-container dialog-container">
      <el-table v-loading="page.loading" :data="page.list">
        <el-table-column label="考试时间" min-width="30" prop="gmtCreate" />
        <el-table-column label="作答时长" min-width="20" prop="userAnswerTime">
          <template #default="scope">
            {{ formatTime(scope.row.userAnswerTime) }}
          </template>
        </el-table-column>
        <el-table-column label="考试结果" min-width="20">
          <template #default="scope">
            <enum-view :enum-name="'UserExamStatus'" :enum-value="scope.row.userExamStatus" />
          </template>
        </el-table-column>
        <el-table-column label="考试得分" min-width="20" prop="userScore" />
        <el-table-column label="阅卷方式" min-width="20">
          <template #default="scope">
            <enum-view :enum-name="'EvaluationMethod'" :enum-value="scope.row.evaluationMethod" />
          </template>
        </el-table-column>
        <el-table-column label="阅卷状态" min-width="20">
          <template #default="scope">
            <enum-view :enum-name="'UserEvaluationStatus'" :enum-value="scope.row.userEvaluationStatus" />
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100">
          <template #default="scope">
            <el-button :disabled="scope.row.userExamStatus < 2" link type="primary" @click="handleExamEvaluation(scope.row)">批阅 </el-button>
          </template>
        </el-table-column>
      </el-table>
      <common-pagination v-model:page="page" @pagination="handlePage" />
    </div>
  </el-dialog>
</template>
<script setup>
  import { examApi } from '@/api/exam'
  import { formatTime } from '@/utils/base.js'
  import CommonPagination from '@/components/Common/Pagination/index.vue'
  import EnumView from '@/components/Enum/View/index.vue'
  import useTable from '@/utils/table.js'
  import { useRouter } from 'vue-router'

  const router = useRouter()

  const props = defineProps({
    examType: { type: Number, default: 0 },
    examId: { type: String, default: '' },
    userId: { type: String, default: '' },
    visible: { type: Boolean, default: false }
  })

  // 批阅
  const handleExamEvaluation = (item) => {
    router.push({ path: '/exam/record/evaluation', query: { recordId: item.id, examId: props.examId } })
  }

  // 关闭
  const emit = defineEmits(['close'])
  const onClose = () => {
    emit('close', false)
  }

  // 基础功能
  const { page, handlePage } = useTable(
    {
      page: examApi.examUserRecordPage
    },
    { examType: props.examType, relateId: props.examId, userId: props.userId }
  )
</script>
